
<template>
  <div class="edit-down-table">
    <vxe-pulldown  class="edit-down-pulldown" ref="xDown" @hide-panel='hidePanel' transfer>
      <template>
        <vxe-input style="width:100%" :size="propSize || 'medium'" :disabled="propDisabled" auto-resize class="edit-down-input" @click="showPanel" v-model="textValue" @suffix-click="showPanel" @change="keyupEvent" clearable>
          <template v-slot:suffix>
            <i :class="iClass"></i>
          </template>
        </vxe-input>
      </template>
      <template v-slot:dropdown>
        <div class="edit-down-wrapper">
          <vxe-grid
            highlight-hover-row
            highlight-current-row
            auto-resize
            height="auto"
            :style="propStyle"
            :scripe="propStripe"
            ref="grid"
            row-id="id"
            :size="propSize || 'medium'"
            :pager-config="tablePage"
            :loading="loading"
            :data="gridData"
            :columns="gridColumns"
            @cell-click="selectEvent"
            @page-change="pageChangeEvent">
          </vxe-grid>
        </div>
      </template>
    </vxe-pulldown>
  </div>
</template>

<script>
export default {
  name: 'MatrSelect',
  props: {
    renderOpts: Object,
    propColumns: {
      type: Array
    },
    propRows: {
      type: Array
    },
    propUrl: {
      type: String,
      default: () => '/base/matr/page'
    },
    propText: {
      type: String
    },
    propTextField: {
      type: String,
      default: 'name'
    },
    propValueField: {
      type: [String, Number],
      default: 'id'
    },
    value: {
      type: [String, Array]
    },
    propSize: {
      type: String
    },
    propHeight: {
      type: [String, Number],
      default: () => '50vh'
    },
    propStyle: {
      type: String,
      default: () => 'width: 60vw'
    },
    propStripe: {
      type: Boolean
    },
    propDisabled: {
      type: Boolean,
      default: () => false
    },
    propMultiple: {
      type: Boolean,
      default: () => false
    },
    propSupplierId: {
      type: String
    },
    propOmoc: {
      type: Boolean,
      default: () => null
    },
    propConsignment: {
      type: Boolean,
      default: () => null
    }
  },
  data() {
    return {
      loading: false,
      filterData: [], //筛选后数据
      tableData: [], //最原始数据
      gridData: [], //显示数据
      currentRow: {},
      textValue: '',
      tablePage: {
        border: true,
        autoHidden: true,
        currentPage: 1,
        pageSize: 20,
        pageSizes: [20, 50, 100, 200],
        total: 0,
        layouts: ['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']
      },
      iClass: 'fa fa-search my-green',
      gridColumns: [
        { type: 'seq', width: 40},
        { title: '品名', field: 'name', width: 200, search: true },
        { title: '品规',  field: 'spec', width: 150, search: true },
        { title: '型号',  field: 'model', width: 150, search: true },
        { title: '厂商名称',  field: 'mfgName', search: true },
        { title: '单品单位',  field: 'skuUnit', width: 80, search: false },
        { title: '单品单价(元)',  field: 'skuPrice', width: 90, search: false },
        { title: '注册证号',  field: 'certificateNo', width: 140, search: false },
        { title: '寄售(代销)',  field: 'flagConsignment', width: 90, dict: 'common_yes_no'},
        { title: '一物一码',  field: 'flagOmoc', width: 80, dict: 'common_yes_no'},
      ]
    }
  },
  watch: {
    propRows(newVal) {
      this.tableData = this.propRows
      this.tablePage.total = this.tableData ? this.tableData.length : 0
      this.filterData = this.tableData
      this.pageChangeEvent(this.tablePage)
    }
  },
  mounted() {
    this.load()
  },
  methods: {
    async fetchData() {
      if (this.strings.isBlank(this.propUrl)) {
        return
      }
      let wrapper = this.$newWrapper()
        .eq('supplierId', this.propSupplierId)
        .eq('flagConsignment', this.propConsignment)
        .eq('flagOmoc', this.propOmoc)

      if (this.strings.isNotBlank(this.textValue) && this.textValue != this.propText) {
        this.gridColumns.filter(column => column.search).forEach(column => {
          wrapper.orlike(column.field, this.textValue)
        })
      }
      let params = {
        queryString: JSON.stringify(wrapper.queryConditions),
        currentPage: this.tablePage.currentPage,
        rowsPerPage: this.tablePage.pageSize,
      }
      let resp = await this.$ajax.get(this.propUrl, {params})
      this.tableData = resp.data
      this.gridData = this.tableData
      this.tablePage.total = parseInt(resp.count == null ? resp.data.length : resp.count, 10)
    },
    async load() {
      this.textValue = this.propText
      if (this.propDisabled) {
        return
      }
      if (this.propColumns != null) {
        this.gridColumns = [{ type: 'seq', width: 40}]
        this.propColumns.forEach(prop => {
          this.gridColumns.push({title: prop.label, field: prop.name, width: prop.width, search: prop.search, dict: prop.dict})
        })
      }
      if (this.propRows == null || !this.propRows.length) {
        await this.fetchData()
      } else {
        this.tableData = this.propRows
        this.tablePage.total = this.tableData ? this.tableData.length : 0
        this.filterData = this.tableData
        this.pageChangeEvent(this.tablePage)
      }
      if (this.value) {
        this.$nextTick(() => {
          this.currentRow = this.gridData.find(item => item.id == this.value)
          this.currentRow && this.$refs.grid.setCurrentRow(this.currentRow) && this.$refs.grid.scrollToRow(this.currentRow)
        })
      } else {
        this.showPanel()
      }
    },
    showPanel() {
      this.$refs.xDown.showPanel()
      this.iClass = 'fa fa-edit my-green'
    },
    keyupEvent() { // 根据输入筛选
      let that = this
      if (this.propRows != null && this.propRows.length) {
        if (this.textValue) {
          this.filterData = this.tableData.filter(item => {
            let find = false
            that.gridColumns.filter(column => column.search).map(col => {
              if (item[col.field] && item[col.field].toString().indexOf(this.textValue) > -1) {
                find = true
                return find
              }
            })
            return find
          })
        } else {
          this.filterData = this.tableData
        }
        this.tablePage.total = this.filterData ? this.filterData.length : 0
      }
      this.tablePage.currentPage = 1
      this.pageChangeEvent(this.tablePage)
      if (this.gridData) {
        this.$refs.grid.setCurrentRow(this.gridData[0])
      }
    },
    async pageChangeEvent({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage
      this.tablePage.pageSize = pageSize
      if (this.propRows == null || !this.propRows.length) {
        await this.fetchData()
      } else {
        this.gridData = this.filterData ? this.filterData.filter((row, index) => index >= (this.tablePage.currentPage - 1) * this.tablePage.pageSize && index < this.tablePage.currentPage * this.tablePage.pageSize) : []
      }
    },
    selectEvent(params) { //选择耗材事件，选择后调用适用房的matrChangeEvent方法来解决
      this.$emit('input', params.row[this.propValueField])
      this.$emit('select', params.row)
      this.textValue = params.row[this.propTextField]
      this.$refs.xDown.hidePanel()
      this.iClass = 'fa fa-search my-green'
    },
    hidePanel() {
      this.iClass = 'fa fa-search my-green'
    }
  }
}
</script>

<style lang="scss">
.vxe-pulldown--panel {
  z-index: 10000 !important;
}

.edit-down-pulldown {
  width: 100%;
}
.edit-down-wrapper {
  width: 65vw !important;
  height: 500px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
}
</style>
